<!--多人同时在线交流中心页面 -->
<template>
  <div class="main-content" style="width: 100%;">
    <div style="display: flex;width: 1640px;height: 750px;margin: 5px auto;">
      <!--侧边用户部分-->
      <div class="card glass" style="width: 300px;height: 700px;margin-top: 10px;margin-right: 5px;margin-left: 50px">
        <div style="width: 250px; border: 1px solid #ddd; border-radius: 5px; height: 660px;">
          <div style="padding: 10px; border-bottom: 1px solid #ddd; color: #000; background-color: #eee">在线用户({{ users.length }})</div>
          <div  style="overflow-y: auto;height: 450px;overflow-y: scroll">
            <div style="display: flex;padding: 10px;align-items: center;border-bottom: 1px solid #eee;cursor: pointer;font-size: 14px;" v-for="(item, index) in users" :key="index">
              <img :src="item.avatar" style="width: 30px; height: 30px; border-radius: 50%">
              <span style="margin-left: 10px">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <!--聊天内容部分-->
      <div class="card glass" style="width: 1000px;height: 700px;margin-top: 10px;margin-right: 5px;">
        <!--  中间部分  -->
        <div style="width: 960px; height: 665px; border: 1px  solid #ddd; border-radius: 5px; background-color: #f1f1f1; margin: 0 10px;">
          <div style="padding: 20px 0; text-align: center; border-bottom: 1px solid #ddd; color: #000; background-color: #eee">聊天大厅</div>
          <div class="im-message-box" style="height: 80%;padding: 10px;overflow-y: auto;background-color: white;">
            <div v-for="item in messages" :key="item.id">
              <!--  右边的气泡 -->
              <div style="display: flex; flex-direction: row-reverse; align-items: flex-start" v-if="item.name === user.name">
                <img :src="item.avatar" alt="" style="width: 40px; height: 40px; border-radius: 50%; margin-left: 10px">
                <div style="font-size: 14px;padding: 10px;margin: 5px 0;border-radius: 5px;color: #000;max-width: 50%;line-height: 20px;width: fit-content;background-color: #26d470;" v-html="item.content" v-if="item.type === 'text'"></div>
                <div style="padding: 0;font-size: 14px;padding: 10px;margin: 5px 0;border-radius: 5px;color: #000;max-width: 50%;line-height: 20px;width: fit-content;" v-if="item.type === 'img'">
                  <!-- 注意  el-image 的load函数必须加上，否则无法触发滚动条到最底端 -->
                  <el-image style="width: 100px" :src="item.content" alt="" :preview-src-list=[item.content] @load="scrollToBottom"></el-image>
                </div>
                <div style=" font-size: 14px;padding: 10px;margin: 5px 0; border-radius: 5px;color: #000; max-width: 50%;line-height: 20px;width: fit-content;background-color: #DBEDFF;cursor: pointer;" v-if="item.type === 'file'"
                     @click="download(item.content)">
                  <div><i class="el-icon-folder-opened"></i>
                    <span>{{ item.content.substring(item.content.indexOf('-') + 1) }}</span>
                  </div>
                </div>
              </div>

              <!--  左边的气泡 -->
              <div style="display: flex; align-items: flex-start" v-else>
                <img :src="item.avatar" alt="" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px">
                <div style="width: 100%">
                  <div style="color: #888; font-size: 12px; width: 50%">{{ item.name }}</div>
                  <div style="font-size: 14px;padding: 10px;margin: 5px 0;border-radius: 5px;color: #000;max-width: 50%;line-height: 20px;width: fit-content;background-color: #07c053;" v-html="item.content"  v-if="item.type === 'text'"></div>
                  <div style="font-size: 14px;padding: 10px;margin: 5px 0;border-radius: 5px;color: #000;max-width: 50%;line-height: 20px;width: fit-content;"  v-if="item.type === 'img'">
                    <el-image style="width: 100px" :src="item.content" alt=""
                              :preview-src-list=[item.content]
                              @load="scrollToBottom"></el-image>
                  </div>
                  <div style="font-size: 14px;padding: 10px;margin: 5px 0;border-radius: 5px;color: #000;max-width: 50%;line-height: 20px;width: fit-content;background-color: #DBEDFF;cursor: pointer;" v-if="item.type === 'file'"
                       @click="download(item.content)">
                    <div><i class="el-icon-folder-opened"></i>
                      <span>{{ item.content.substring(item.content.indexOf('-') + 1) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 输入区域 -->
          <div style="padding: 10px 5px; border-top: 1px solid #ddd; display: flex; align-items: center; width: 960px;">
            <el-popover placement="top" width="300" trigger="click">
              <div style="height: 200px;overflow-y: scroll;">
                <span v-for="(item, index) in emojis" :key="index"
                      style="margin-right: 5px; font-size: 20px; cursor: pointer" v-html="item"
                      @click="clickEmoji(item)"></span>
              </div>
              <i slot="reference" class="el-icon-picture-outline-round" style="font-size: 22px; color: #666;"></i>
            </el-popover>
            <el-popover placement="top"  width=440 trigger="click">
              <!--自定义表情包选项框-->
              <div  style="height: 350px;width: 425px;overflow-y: scroll;background-color: #000000;;flex-wrap: wrap;display: flex;white-space: nowrap;verflow: hidden;">
                <div  v-for="item in likeEmojis" :key="item.id" style="background-color: #000000;height: 130px;width: 130px; padding-bottom: 0; margin-left: 5px;justify-content: center;align-items: center;" >
                  <img :src="item.img"  @click="handleLikeEmoji(item.img)" style="width: 100%; height:100%;object-fit: contain;margin: 0">
                </div>
              </div>
              <i slot="reference" class="el-icon-liaotian-biaoqingbaoxuanzhong" style="font-size: 22px; color: #666;margin-left: 5px"></i>
            </el-popover>
            <div style="margin-left: 5px">
              <!--聊天文件上传-->
              <!-- <el-upload action="http://localhost:9090/files/upload" :show-file-list="false" :on-success="handleFile"></el-upload> -->
              <el-upload action="http://150.158.34.156:9090/files/uploadOSS" :show-file-list="false" :on-success="handleFile">
                <i class="el-icon-folder-opened" style="font-size: 20px; color: #666;"></i>
              </el-upload>
            </div>
            <div id="im-content" contenteditable style="flex: 1; background-color: #fff; margin: 0 5px; padding: 10px; border: 1px solid #ddd; border-radius: 2px; outline: none; font-size: 14px;"></div>
            <el-button type="primary" @click="send" style="border: none">发送</el-button>
          </div>
        </div>
        <!--  中间部分结束  -->
      </div>
      <!--预留开发位-->
      <div class="card glass" style="width: 250px;height: 700px;margin-top: 10px;">
      </div>
    </div>
    <div style="position: fixed;width: 100%;">
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    </div>
  </div>
</template>
<script>
import emojis from "@/assets/emoji";
let client
export default {
  name: "Multiplayer",
  components: {
  },
  data() {
    return {
      user: {},
      permission: [],
      emojis: [],
      likeEmojis: {},
      messages: [],
      users: [],
    }
  },
  mounted() {
    this.emojis = emojis.split(',')
    this.user = JSON.parse(localStorage.getItem('xm-user') || "{}")
    if(this.user.avatar == null){
      this.user.avatar = "https://drd-web.oss-cn-beijing.aliyuncs.com/wutoxiang.png"
    }
    this.selectAllLikeEmoji();

    let name = window.btoa(encodeURI(this.user.name))
    let avatar = window.btoa(encodeURI(this.user.avatar))
    //client = new WebSocket(`ws://localhost:9090/imserver/${name}/${avatar}`)
    client = new WebSocket(`ws://150.158.34.156:9090/imserver/${name}/${avatar}`)
    client.onopen = () => {
      console.log('websocket open')
    }
    client.onclose = () => {  // 页面刷新的时候和后台websocket服务关闭的时候
      console.log('websocket close')
    }
    client.onmessage = (msg) => {
      if (msg.data) {
        let json = JSON.parse(msg.data)
        if (json.name && json.content) {  // 聊天消息
          this.messages.push(json)
          this.scrollToBottom()  // 滚动页面到最底部
        }
        if (json.users && json.users.length) {
          this.users = json.users
          console.log('onmessage', this.users)
        }
      }
    }
    // 加载聊天数据
    this.load()
  },

  beforeDestroy() {
    if (client) {
      client.close()
    }
  },

  // 定义一些页面上控件出发的事件调用的方法
  methods: {
    selectAllLikeEmoji() {
      this.$request.get("/meme/selectAll").then(res => {
        this.likeEmojis = res.data || {};
      })
    },
    //从显示里发表情包
    handleLikeEmoji(data){
      if(client){
        console.log('我是收藏的表情包')
        let message = {name: this.user.name, content: data, avatar: this.user.avatar}
        message.content = data;
        message.type = 'img';
        client.send(JSON.stringify(message))
      }
    },
    download(file) {
      window.open(file)
    },
    handleFile(file) {
      if (client) {
        let message = {name: this.user.name, content: file.data, avatar: this.user.avatar}
        let extName = file.data.substring(file.data.lastIndexOf('.') + 1)
        if (['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'svg', 'webp'].includes(extName)) {
          message.type = 'img'
        } else {
          message.type = 'file'
        }
        client.send(JSON.stringify(message))
      }
    },
    load() {
      this.$request.get('/imGroup').then(res => {
        if (res.code === '200') {
          this.messages = res.data
          this.scrollToBottom()  // 滚动条滚动到最底部
          this.$message.success('欢迎进入聊天大厅')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    send() {
      let inputBox = document.getElementById('im-content')
      const content = inputBox.innerHTML
      if (!content) {
        this.$notify.error('请输入聊天内容')
        return
      }
      if (client) {
        let message = {name: this.user.name, content: content, avatar: this.user.avatar, type: 'text'}
        client.send(JSON.stringify(message))
      }
      inputBox.innerHTML = ''  // 清空输入框
    },
    clickEmoji(emoji) {
      document.getElementById('im-content').innerHTML += emoji
    },
    scrollToBottom() {
      this.$nextTick(() => {
        // 设置聊天滚动条到底部
        let imMessageBox = document.getElementsByClassName("im-message-box")[0]
        //设置滚动条到最底部
        imMessageBox.scrollTop = imMessageBox.scrollHeight
      })

    },
  }
}
</script>

<style >
.e1{
  background-image: linear-gradient(180deg, #f0f0f0, #020d10);
  height: 750px;
}
.glass{
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.bubble{
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: inset 0 0 8px  #fff;
  animation: flutter 10s infinite;
  opacity: 0;
}
@keyframes flutter {
  0%{
    transform: translateX(0);
    bottom: -100px;
    opacity: 1;
  }
  50%{
    transform: translateX(100px);
    opacity: 0.5;
  }


  100%{
    transform: translateX(0px);
    bottom: 100%;
    opacity: 0;

  }
}
.bubble:nth-child(1){
  left: -10%;
  width: 50px;
  height: 50px;
  animation-duration: 9s;
  animation-delay: 0.1s;
}
.bubble:nth-child(2){
  left: 15%;
  width: 20px;
  height: 20px;
  animation-duration: 6s;
  animation-delay: 1.5s;

}
.bubble:nth-child(3){
  left: 20%;
  width: 60px;
  height: 60px;
  animation-duration: 10s;



}
.bubble:nth-child(4){
  left: 30%;
  width: 30px;
  height: 30px;
  animation-duration: 5.5s;
  animation-delay: 1.5s;

}
.bubble:nth-child(5){
  left: 40%;
  width: 50px;
  height: 50px;
  animation-duration: 12s;



}
.bubble:nth-child(6){
  left: 50%;
  width: 20px;
  height: 20px;
  animation-duration: 6s;
  animation-delay: 1s;

}
.bubble:nth-child(7){
  left: 60%;
  width: 40px;
  height: 40px;
  animation-duration: 8s;
  animation-delay: 1s;

}
.bubble:nth-child(8){
  left: 65%;
  width: 60px;
  height: 60px;
  animation-duration: 15s;

}
.bubble:nth-child(9){
  left: 80%;
  width: 55px;
  height: 55px;
  animation-duration: 9s;
  animation-delay: 0.5s;

}
.bubble:nth-child(10){
  left: 100%;
  width: 40px;
  height: 40px;
  animation-duration: 12s;
}

</style>